<template>
    <a-select 
        :style="[styleWidth]" 
        :mode="mode" 
        v-model:value="modelValue" 
        :placeholder="placeholder" 
        :options="optionsList" 
        :fieldNames="{ label, value }" 
        :allowClear="allowClear"
        @change="change"
    />
</template>
<script setup>
import { ref, computed, onMounted } from "vue"
import { dataTypes } from "@/utils/index"
import SelectProps from "./selectProps"
const props = defineProps(SelectProps)
const emit = defineEmits(['change'])

// options
const optionsList = ref([])
/**
 * 获取options
 */
const getOptions = () => {
    const isFunction = dataTypes().isFunction(props.optionsAsync)
    if(isFunction) {
        props.optionsAsync().then(data => {
            optionsList.value = data
        })
        return
    }
    // 不是函数
    optionsList.value = props.options
}
const modelValue = defineModel()
// label and value，key
const label = computed(() => props.config?.label || props.name )
const value = computed(() => props.config?.value || props.id )
/**
 * 宽度设置
 */
 const styleWidth = computed(() => {
    return { width: props.width }
})
/**
 * change回调
 */
const change = (value, option) => {
    emit('change', value, option)
}

onMounted(() => {
    getOptions()
    
})
</script>